<!DOCTYPE html>
<html lang="zh-cn">
<!-- 关于高度的一些问题 -->

<!-- 当我们要写一个组件，或者元素时，首先要明确这个元素的高度是什么样的，有三种可能：
1. 取决于父元素，如：width: 100%
2. 固定，如：width: 100px
3. 取决于子元素，自身的高度靠子元素撑起来，此时是不可能有滚动条的。没有设置高度，默认就是这种情况 -->

<head>
	<meta charset="utf-8" />
	<title>测试</title>
	<style>
		body {
			margin: 0;
			height: 100vh;
		}
 
		.d1,
		.d2,
		.d3 {
			padding: 5px;

		}

		.d1 {
			/* height: 50%; */
			border: 1px solid red;
		}

		.d2 {
			height: 50%;
			border: 1px solid black;
		}

		.d3 {
			height: 50%;
			border: 1px solid blue;
		}

		.content {
			background-color: #f99;
			height: 100px;
		}
	</style>
</head>

<body>
	<span class="d1">
		<div class="d2">
			<div class="d3">
				<div class="content"></div>
			</div>
		</div>
	</div>



</body>

</html>